import React from 'react';
import { useTranslation } from 'react-i18next';

interface TransferTypeProps {
	tabsType: 'sceneTransfer' | 'agentTransfer' | 'inviteAgent' | 'inviteClient';
	onClick?: (type: 'sceneTransfer' | 'agentTransfer' | 'inviteAgent' | 'inviteClient') => void;
	inviteOtherStatus?: string;
	showTransferScene: boolean;
}

const TransferType = (props: TransferTypeProps) => {
	const { t } = useTranslation();
	const { tabsType, onClick, inviteOtherStatus, showTransferScene = false } = props;

	const getTransferType = () => {
		if (inviteOtherStatus === 'transfer') {
			return (
				<>
					<div
						className={tabsType === 'sceneTransfer' ? 'active-tabs' : 'normal-tabs'}
						onClick={() => {
							onClick && onClick('sceneTransfer');
						}}
					>
						<p className="agent-text">{t('scene-transfer')}</p>
					</div>
					<div
						className={tabsType === 'agentTransfer' ? 'active-tabs' : 'normal-tabs'}
						onClick={() => {
							onClick && onClick('agentTransfer');
						}}
					>
						<p className="agent-text">{t('agent-transfer')}</p>
					</div>
				</>
			);
		} else {
			return (
				<>
					<div
						className={tabsType === 'inviteAgent' ? 'active-tabs' : 'normal-tabs'}
						onClick={() => {
							onClick && onClick('inviteAgent');
						}}
					>
						<p className="agent-text">{t('invite-agent')}</p>
					</div>
					<div
						className={tabsType === 'inviteClient' ? 'active-tabs' : 'normal-tabs'}
						onClick={() => {
							onClick && onClick('inviteClient');
						}}
					>
						<p className="agent-text">{t('invite-client')}</p>
					</div>
				</>
			);
		}
	};

	return <div className="tabs-box">{getTransferType()}</div>;
};

export default TransferType;
